﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>section</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="section.css" rel="stylesheet" />
    <script src="section.js"></script>
    <script type="text/javascript">WinJS.UI.processAll();</script>
</head>

<body>
    <div class="flipItemTemplate" data-win-control="WinJS.Binding.Template">
        <div class="overlaidItemTemplate">
            <img class="image" src="#" data-win-bind="src: uri; alt: title" />
            <div class="overlay">
                <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
            </div>
        </div>

    </div>

    <div class="sectionRoot" data-win-bind="style.backgroundImage:id Demo.Converters.idToBackground">
        <div class="headerArea">
            <button class="win-backbutton" type="button"></button>
            <h1 class="titlearea win-type-ellipsis"
                data-win-bind="textContent:sectionTitle">
                Section ?
            </h1>
        </div>
        <div id="flip"
            data-win-control="WinJS.UI.FlipView"
            data-win-bind="winControl.itemDataSource:images.dataSource; winControl.onpagecompleted$currentPage.value:winControl.currentPage$two Binding.Mode.eventToProperty"
            data-win-options="{ itemTemplate : select('.flipItemTemplate') }">
        </div>
        <div data-win-control="WinJS.UI.AppBar">
            <button
                data-win-control="WinJS.UI.AppBarCommand"
                data-win-bind="onclick:firstCommand Binding.Mode.command"
                data-win-options="{icon:'home', id:'', label:'Home', section:'global', type:'button'}">
            </button>
            <button
                data-win-control="WinJS.UI.AppBarCommand"
                data-win-bind="onclick:lastCommand Binding.Mode.command"
                data-win-options="{icon:'next', id:'', label:'Last', section:'global', type:'button'}">
            </button>
        </div>
    </div>
</body>
</html>
